<template>
  <page class="app-container">
    <!-- 过滤条件 begin-->
    <el-form :inline="true" class="filter-container">
      <el-form-item prop="bond" label="绑定状态">
        <el-select v-model="searchForm.bond" placeholder="请选择查询对象">
          <el-option
            v-for="item in [{name:'全部', value: false}, {name: '已绑定', value: true }]"
            :key="item.value"
            :label="item.name"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="memberGroup" label="会员">
        <member-group-select v-model="searchForm.memberGroup" :all="true"></member-group-select>
      </el-form-item>

      <el-form-item prop="mobile" label="手机">
        <el-input v-model="searchForm.mobile" placeholder="请输入手机号" clearable></el-input>
      </el-form-item>
      <el-form-item prop="name" label="昵称/姓名">
        <el-input v-model="searchForm.name" placeholder="微信昵称/姓名" clearable></el-input>
      </el-form-item>
      <el-form-item prop="id" label="会员ID">
        <el-input v-model="searchForm.id" placeholder="会员ID" clearable></el-input>
      </el-form-item>

      <el-form-item label="时间段">
        <el-date-picker
          v-model="time"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="onSearch">查询
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 过滤条件 end-->

    <!-- 表格 begin-->
    <el-table :data="list" style="width: 100%" class="my-table" fit>
      <el-table-column prop="id" label="会员ID" width="90"></el-table-column>

      <el-table-column prop="userCode" label="会员编号" align="center" width="120"></el-table-column>

      <el-table-column label="会员等级" width="130">
        <template slot-scope="props">
          <el-tag>{{props.row.memberGroup | memberName}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="用户" width="220">
        <template slot-scope="props">
          <div class="middle">
            <m-img :src="props.row.head" ratio="1" style="width: 50px"/>
            <span class="ml6" style="line-height: 50px;display: inline-block">{{props.row.nick}}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="手机" width="130">
        <template slot-scope="props">
          <el-tag type="success" v-if="props.row.mobile">{{props.row.mobile}}</el-tag>
          <el-tag type="info" v-else>未绑定手机</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="realName" label="真实姓名"></el-table-column>

      <el-table-column label="操作" align="center"  width="120">
        <template slot-scope="props">
          <el-button size="small" :disabled="isEmpty(props.row.mobile)" @click="onUnbind(props.row.id)">解绑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 end-->

    <!--分页 begin-->
    <div class="pagination-container mt20">
      <el-pagination background @current-change="onPageChange" :current-page="searchForm.page" :page-size="limit"
                     layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <!--分页 begin-->
  </page>
</template>

<script>
  import {timeMap} from '@/utils/widget'
  import {confirm_handler} from '@/utils/feedback'

  export default {
    name: 'phone',
    data() {
      return {
        list: [],
        total: 0,
        limit: 0,
        searchForm: {
          bond: true,
          date1: null,
          date2: null,
          page: 1
        }
      }
    },
    computed: {
      time: timeMap('searchForm.date1', 'searchForm.date2')
    },
    created() {
      this.getList()
    },
    methods: {
      // 获取列表
      async getList() {
        //this.listLoading = true
        let {total, list, limit} = await this.$get_list('admin/member/getUserByComdition', this.searchForm)
        Object.assign(this, {total, list, limit})
        document.documentElement.scrollTop = 0
      },
      // 搜索过滤
      onSearch() {
        this.searchForm.page = 1
        this.getList()
      },

      // 分页
      onPageChange(val) {
        this.searchForm.page = val
        this.getList()
      },

      // 解绑手机
      onUnbind(userId) {
        confirm_handler({
          ajax: () => this.$post('admin/member/unbandMobile',{userId}),
          hint: '确认解绑？'
        }).then(this.getList)
      }
    }
  }
</script>
